<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { addBusinessApi } from '@/api/business'
import { useRouter } from 'vue-router'

const router = useRouter()

// 表单数据
const formData = reactive({
  phone: '',
  channel: '',
  name: '',
  gender: '',
  age: '',
  wechat: '',
  qq: '',
  subject: '',
  remark: '',
  degree: '',
  jobStatus: '',
  courseId: ''
})

// 表单验证规则
const rules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 1, max: 20, message: '姓名长度在1-20个字符之间', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', min: 1, max: 120, message: '年龄在1-120之间', trigger: 'blur' }
  ],
  subject: [
    { required: true, message: '请选择科目', trigger: 'change' }
  ],
  courseId: [
    { required: true, message: '请选择课程', trigger: 'change' }
  ]
}

// 加载状态
const loading = ref(false)

// 表单引用
const formRef = ref(null)

// 渠道选项
const channelOptions = [
  { label: '电话', value: 1 },
  { label: '线上', value: 2 },
  { label: '推荐', value: 3 },
  { label: '其他', value: 4 }
]

// 性别选项
const genderOptions = [
  { label: '男', value: 1 },
  { label: '女', value: 2 }
]

// 科目选项
const subjectOptions = [
  { label: '语文', value: 1 },
  { label: '数学', value: 2 },
  { label: '英语', value: 3 },
  { label: '物理', value: 4 },
  { label: '化学', value: 5 },
  { label: '生物', value: 6 },
  { label: '其他', value: 7 }
]

// 学历选项
const degreeOptions = [
  { label: '小学', value: 1 },
  { label: '初中', value: 2 },
  { label: '高中', value: 3 },
  { label: '本科', value: 4 },
  { label: '硕士', value: 5 },
  { label: '博士', value: 6 },
  { label: '其他', value: 7 }
]

// 工作状态选项
const jobStatusOptions = [
  { label: '在职', value: 1 },
  { label: '离职', value: 2 },
  { label: '学生', value: 3 },
  { label: '其他', value: 4 }
]

// 课程选项
const courseOptions = [
  { label: '课程1', value: 1 },
  { label: '课程2', value: 2 },
  { label: '课程3', value: 3 },
  { label: '课程4', value: 4 },
  { label: '课程5', value: 5 }
]

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    loading.value = true
    
    // 准备提交数据
    const submitData = {
      ...formData,
      // 将字符串类型的数字转换为数字类型
      channel: Number(formData.channel),
      gender: Number(formData.gender),
      age: Number(formData.age),
      subject: Number(formData.subject),
      degree: Number(formData.degree),
      jobStatus: Number(formData.jobStatus),
      courseId: Number(formData.courseId)
    }
    
    const result = await addBusinessApi(submitData)
    
    if (result.code === 1) {
      ElMessage.success('添加商机成功')
      // 重置表单
      resetForm()
      // 提示是否继续添加
      ElMessageBox.confirm('是否继续添加新商机？', '提示', {
        confirmButtonText: '继续添加',
        cancelButtonText: '返回列表',
        type: 'info'
      }).then(() => {
        // 继续添加，清空表单
        resetForm()
      }).catch(() => {
        // 返回商机列表
        router.push('/business/list')
      })
    } else {
      ElMessage.error(result.msg || '添加商机失败')
    }
  } catch (error) {
    console.error('添加商机出错:', error)
    if (error !== false) { // 表单验证失败不会抛出错误，而是返回false
      ElMessage.error('网络错误，请稍后重试')
    }
  } finally {
    loading.value = false
  }
}

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

// 返回列表
const backToList = () => {
  ElMessageBox.confirm('确定要返回列表吗？未保存的数据将丢失。', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    router.push('/business/list')
  }).catch(() => {
    // 用户取消操作
  })
}
</script>

<template>
  <div class="business-add">
    <h2 class="page-title">添加商机</h2>
    
    <div class="form-section">
      <el-form 
        ref="formRef"
        :model="formData" 
        :rules="rules" 
        label-width="120px"
        class="business-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入手机号" />
            </el-form-item>
            
            <el-form-item label="客户姓名" prop="name">
              <el-input v-model="formData.name" placeholder="请输入客户姓名" />
            </el-form-item>
            
            <el-form-item label="年龄" prop="age">
              <el-input v-model.number="formData.age" type="number" placeholder="请输入年龄" min="1" max="120" />
            </el-form-item>
            
            <el-form-item label="性别">
              <el-select v-model="formData.gender" placeholder="请选择性别">
                <el-option v-for="option in genderOptions" :key="option.value" :label="option.label" :value="option.value" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="渠道">
              <el-select v-model="formData.channel" placeholder="请选择渠道">
                <el-option v-for="option in channelOptions" :key="option.value" :label="option.label" :value="option.value" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="科目" prop="subject">
              <el-select v-model="formData.subject" placeholder="请选择科目">
                <el-option v-for="option in subjectOptions" :key="option.value" :label="option.label" :value="option.value" />
              </el-select>
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="课程" prop="courseId">
              <el-select v-model="formData.courseId" placeholder="请选择课程">
                <el-option v-for="option in courseOptions" :key="option.value" :label="option.label" :value="option.value" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="学历">
              <el-select v-model="formData.degree" placeholder="请选择学历">
                <el-option v-for="option in degreeOptions" :key="option.value" :label="option.label" :value="option.value" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="工作状态">
              <el-select v-model="formData.jobStatus" placeholder="请选择工作状态">
                <el-option v-for="option in jobStatusOptions" :key="option.value" :label="option.label" :value="option.value" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="微信">
              <el-input v-model="formData.wechat" placeholder="请输入微信号" />
            </el-form-item>
            
            <el-form-item label="QQ">
              <el-input v-model="formData.qq" placeholder="请输入QQ号" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="备注">
          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注信息" :rows="4" />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm" :loading="loading">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button @click="backToList">返回列表</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.business-add {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.page-title {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.form-section {
  margin-top: 20px;
}

.business-form {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .business-add {
    padding: 10px;
  }
  
  .business-form {
    padding: 10px;
  }
  
  .el-row {
    flex-direction: column;
  }
  
  .el-col {
    width: 100% !important;
  }
}
</style>